<template>
  <el-form class="list" onsubmit="return false;">
    <el-form-item
      label="ToDoList"
      size="medium"
      
      label-width="100px"
      class="header"
    >
      <el-input
        placeholder="添加ToDo"
        size="medium"
        v-model="inputValue"
        class="addlist"
        @keyup.enter.native="addDomain"
      ></el-input>
    </el-form-item>
    <div class="state">
      <span>正在进行</span>
      <span>({{ domains.length }})</span>
    </div>
    <el-form-item
      v-for="(domain, index) in domains"
      v-model="domains"
      :key="domain.key"
      :prop="'domains.' + index + '.value'"
    >
      <el-checkbox @change="moveDomain(domain, index)" v-model="domain.checked">
          <span class="item_title" v-if="uplist !=index" @click.prevent="eat(domain,index)" >{{ domain.value }}</span>
          <input
          type="text"
          v-if="uplist==index"
          v-model="domain.value"
          @keydown.enter="off"
          @blur="off"
        />
      </el-checkbox>
      <el-button @click.prevent="removeDomain(domain)">删除</el-button>
    </el-form-item>
    <div class="state">
      <span>已经完成</span>
      <span>({{ domains_after.length }})</span>
    </div>
    <el-form-item
      v-for="(domain, index) in domains_after"
      v-model="domains_after"
      :key="domain.key"
      :prop="'domains_after.' + index + '.value'"
    >
      <el-checkbox
        @change="moveDomain_after(domain, index)"
        v-model="domain.checked"
        ><span>{{ domain.value }}</span></el-checkbox
      ><el-button @click.prevent="removeDomain_after(domain)">删除</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      domains: [],
      domains_after: [],
      isChecked: false,
      Checked: true,
      inputValue: "",
      inputStr: "",
      uplist: -1,
    };
  },
  methods: {
    removeDomain(item) {
      var index = this.domains.indexOf(item);
      this.domains.splice(index, 1);
      localStorage.domains = JSON.stringify(this.domains);
    },
    removeDomain_after(item) {
      var index = this.domains_after.indexOf(item);
      this.domains_after.splice(index, 1);
      localStorage.domains_after = JSON.stringify(this.domains_after);
    },
    addDomain() {
      this.domains.push({
        value: this.inputValue,
        checked: this.isChecked,
        key: Date.now,
      });
      this.inputValue=''
      localStorage.domains = JSON.stringify(this.domains);
      localStorage.domains_after = JSON.stringify(this.domains_after);
    },
    moveDomain(item, index) {
      this.domains_after.push({
        value: this.domains[index].value,
        checked: this.Checked,
        key: Date.now,
      });
      this.removeDomain(item);
      localStorage.domains_after = JSON.stringify(this.domains_after);
      localStorage.domains = JSON.stringify(this.domains);
    },
    moveDomain_after(item, index) {
      this.domains.push({
        value: this.domains_after[index].value,
        checked: this.isChecked,
      });
      this.removeDomain_after(item);
      localStorage.domains = JSON.stringify(this.domains);
      localStorage.domains_after = JSON.stringify(this.domains_after);
    },
    off() {
      this.uplist = -1;
      localStorage.domains = JSON.stringify(this.domains);
    },
    eat(domain, index) {
      this.uplist = index;
      this.inputStr = domain.value;
    },
  },
  created() {
    console.log(localStorage);
    
    // 组件初始化  一开始就把本地数据加载出来
    let domains = localStorage.domains
    let domains_after = localStorage.domains_after
    this.domains = domains ? JSON.parse(domains) : this.domains
    this.domains_after = domains_after ? JSON.parse(domains_after) : this.domains_after
    
  },
  mounted(){
    for(let i=0;i<3;i++){
      console.log(i++)
    }
    for(let j=0;j<3;j++){
      console.log(++j)
    }
    this.$bus.$on("updateTodo",this.updateTodo)
    
  },
  destroyed() {
    
    this.$bus.$off("updateTodo")
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.state {
  width: 350px;
  height: 50px;
  font-size: large;
  display: flex;
  margin-left: 10px;
  justify-content: space-between;
}

.list {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
/deep/ .el-form-item--medium.el-form-item {
  display: flex;
  justify-content: space-between;
}

/deep/ .el-form-item--medium .el-form-item__label {
  font-size: 32px;
}

/deep/ .el-form-item__content {
  width: 350px;
  display: flex;
  justify-content: space-between;
}

/deep/ .el-input--medium .el-input__inner {
  width: 150px;
}

/deep/ .el-radio__inner {
  display: flex;
}

</style> 

